import {FlatList, ToastAndroid, View, Text} from 'react-native';
import React, {useEffect} from 'react';
import {get} from '../http/http';
import config from '../config/config.js';
import Colors from '../resources/Colors.js';
import {useStyleConstants} from '../resources/StyleConstants.js';
import {useResponsive} from 'react-native-responsive-hook';
import ColorButton from '../components/ColorButton';

export default function BoxProductsView(props) {
  const [list, setList] = React.useState([]);
  useEffect(() => {
    const loadData = async () => {
      try {
        const {data} = await get(
          '/assets/materialCabinet/api/getMaterialCabinetAssetsList',
          {deviceId: config.DEVICE_ID, page: 1, limit: 999},
        );
        setList(data.data);
      } catch (error) {
        ToastAndroid.show(error.message, ToastAndroid.SHORT);
      }
    };
    loadData();
  }, []);
  const {STYLES} = useStyleConstants();
  const {wp, hp, rem} = useResponsive();

  const getItem = async item => {
    try {
      await get('/assets/materialCabinet/api/getAdminMaterialCabinetIsTake', {
        warehousingId: item.warehousingId,
      });
      await get('/assets/materialCabinet/api/adminMaterialCabinetTake', {
        deviceId: item.warehousingId,
        relId: item.relId,
      });
      props.openBox && props.openBox(item);
    } catch (error) {
      ToastAndroid.show(error.message, ToastAndroid.SHORT);
    }
  };
  const renderItem = ({item, index}) => {
    const textStyle = {
      flex: 2,
      textAlign: 'center',
      color: '#333',
      fontSize: STYLES.TEXT_SMALL_SIZE,
    };
    return (
      <View
        style={{
          height: hp(5),
          marginHorizontal: '0%',
          width: '100%',
          flexDirection: 'row',
          alignItems: 'center',
        }}>
        <Text style={{...textStyle, flex: 1}}>{index + 1}</Text>
        <Text style={{...textStyle, textAlign: 'left'}}>{item.assetsName}</Text>

        <Text style={{...textStyle}}>{item.warehousingSum}</Text>
        <Text style={{...textStyle}}>{item.relNum}</Text>
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            flex: 3,
            justifyContent: 'space-around',
          }}>
          <ColorButton
            backgroundColor={Colors.primaryColor}
            fontSize={rem(7)}
            height={hp(3)}
            containerStyle={{
              paddingHorizontal: wp(4),
            }}
            onPress={() => getItem && getItem(item)}>
            实物取出
          </ColorButton>
        </View>
      </View>
    );
  };

  const renderHeader = () => {
    const textStyle = {
      flex: 2,
      textAlign: 'center',
      color: '#fff',
      fontSize: STYLES.FOURTH_FONT_SIZE,
    };
    return (
      <View
        style={{
          height: hp(5),
          marginHorizontal: '0%',
          width: '100%',
          marginTop: '0%',
          backgroundColor: '#12CAA8',
          flexDirection: 'row',
          alignItems: 'center',
        }}>
        <Text style={{...textStyle, flex: 1}}>序号</Text>
        <Text style={{...textStyle}}>设备名称</Text>
        <Text style={{...textStyle}}>数量</Text>
        <Text style={{...textStyle}}>柜格号</Text>
        <Text style={{...textStyle, flex: 3}}>操作</Text>
      </View>
    );
  };

  return (
    <View
      style={{
        width: '90%',
        minWidth: '80%',
        alignItems: 'center',
        justifyContent: 'center',
        minHeight: '50%',
        backgroundColor: 'white',
        borderRadius: 20,
        padding: '2%',
      }}>
      <Text style={{textAlign: 'center', fontSize: 20}}>实物格子列表</Text>
      <FlatList
        data={list}
        renderItem={renderItem}
        ItemSeparatorComponent={() => (
          <View style={{height: 1, backgroundColor: '#e3e3e3'}} />
        )}
        ListHeaderComponent={renderHeader}
        extraData={list}
        keyExtractor={item => item.warehousingId}
      />
    </View>
  );
}
